import React, { PureComponent } from "react";
import { Button, Tree, Icon ,Modal, message } from "antd";
import { connect } from "dva";
import DocTreeEditModal from "./DocTreeEditModal"
const { TreeNode } = Tree


class DocTree extends PureComponent {

    render() {
        const { treeData ,selectedTreeNodeId} = this.props
        return (
            <div>
                <span style={{ fontWeight: 'bold' }}>文档目录树</span>
                <Button type="primary" size='small' 
                onClick={() => { 
                    if(selectedTreeNodeId && selectedTreeNodeId.length){
                    this.props.showDocTreeModal()
                    }else{
                        message.warn("请先选择父节点")
                    }
                }} 
                style={{ display: 'float', float: 'right' }}
                >添加</Button>
                <Tree
                    checkable={false}
                    onSelect={this.onTreeSelect.bind(this)}
                    defaultExpandAll={true}
                >
                    {this.renderTreeNodes(treeData)}
                </Tree>
                <DocTreeEditModal/>
            </div>
        );
    }

    renderTreeNodes = (treeData) => treeData.map((data) => {
             if (data.id === this.props.selectedTreeNodeId && (data.children==null || data.children.length === 0)) {
                data.show = (
                    <div>
                        <span >{data.name}</span>
                        <Icon style={{ marginLeft: 10 }} onClick={()=>this.props.showDocTreeModal(data)} type='edit' />
                        <Icon style={{ marginLeft: 10 }} onClick={() => this.deleteTreeNode(data.id)} type='delete' />
                    </div>
                )
            } else {
            data.show = data.name;
            }
        return (
            <TreeNode key={data.id} title={data.show}>
                {
                    (data.children) ? this.renderTreeNodes(data.children) : null
                }
            </TreeNode>
        )
    })

    deleteTreeNode(id) {
        const tableData = this.props.tableData
        if (tableData && tableData.entityData &&tableData.entityData.length) {
            message.warn("分类下已存在文档，无法删除")
        } else {
            Modal.confirm({
                title: '删除操作',
                content: '确定要删除吗？',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                    this.props.deleteTreeNode(id)
                }
            });
        }
    }

    onTreeSelect(key, e) {
        if (key && key[0]) {
            this.props.updateSelectedTree(key[0])
            if (key[0] !== this.props.selectedTreeNodeId) {
                this.props.queryDocumentList()
            }
        }
    }
}

const mapState = (state) => {
    return {
        treeData: state.docAssets.treeData,
        tableData: state.docAssets.tableData,
        selectedTreeNodeId: state.docAssets.selectedTreeNodeId,
    }
}

const mapDispatch = (dispatch) => {
    return {
        updateSelectedTree(key) {
            dispatch({
                type: 'docAssets/changeSelectedTreeId',
                payload: { selectedTreeNodeId: key }
            })
        },
        deleteTreeNode(key){
            dispatch({
                type: 'docAssets/deleteTreeNode',
                payload: { key: key }
            })
        },
        queryDocumentList() {
            dispatch({
                type: 'docAssets/changeTableKeyWord',
                payload:{tableKeyWord:null}
            })
            dispatch({
                type: 'docAssets/changeTableSearchValue',
                payload:{tableSearchValue:null}
            })
            dispatch({
                type: 'docAssets/changeTableCurrentPage',
                payload:{tableCurrentPage:1}
            })
            dispatch({
                type: 'docAssets/queryDocumentList'
            })
        },
        showDocTreeModal(data) {
            if(data){
                dispatch({
                    type: 'docAssets/changeDocTreeModalData',
                    payload: {docTreeModalData: data}
                }) 
            }
            dispatch({
                type: 'docAssets/changeDocTreeModalVisible',
                payload: {docTreeModalVisible: true}
            })
        }
    }
}

export default connect(mapState, mapDispatch)(DocTree)